<!-- <script lang="ts" setup>
import { ref } from 'vue';
const currentDate = ref(new Date());
</script>
<template>
  {{ currentDate }}
  <z-calendar v-model="currentDate">
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '✔️' : '' }}
      </p>
    </template>
  </z-calendar>
</template> -->

<script lang="ts" setup>
import { Random } from 'mockjs';
import { ref } from 'vue';
import Item from './Item.vue';
import { DefineComponent } from 'vue';

const totalCount = 10000;
interface DataType {
  id: number;
  name: string;
  desc: string;
  index: number;
}
const data: Array<DataType> = [];
let index = 0;
while (index++ !== totalCount) {
  data.push({
    id: index,
    name: Random.name(),
    desc: Random.csentence(20, 120),
    index,
  });
}
const items = ref(data);
</script>
<template>
  <z-virtual-scroll-list
    class="virtual-list"
    :data-sources="items"
    data-key="id"
    :keeps="30"
    :estimate-size="80"
    :data-component="(Item as DefineComponent<{}, {}, any>)"
  ></z-virtual-scroll-list>
</template>
<style lang="scss">
.virtual-list {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  border: 3px solid red;
}
</style>
